<template>
  <div class="content" v-loading="showLoading"
    v-empty="!userInfo.phone"
    xs-empty-icon="no_data"
    xs-empty-text="暂无数据"
    >
    <div class="header">
      <div class="block-item">
        <div class="block-title">
          <span>基本信息</span>
        </div>
        <div class="block-content">
          <span>{{userInfo.username}}</span>
          <span>{{userInfo.phone}}</span>
        </div>
      </div>
      <div class="block-item">
        <div class="block-title">
          <span>职业动机评测结果</span>
        </div>
        <div class="block-content">
          <div
            class="result-item"
            :style="{'background-color':colors[index]}"
            v-for="(item,index) in list"
            :key="index"
          >
            <span style="margin-right: 10px">{{item.title}}</span>
            <span>{{parseInt(item.normdistValue * 100) + '%'}}</span>
          </div>
        </div>
      </div>
      <div style="background-color: #fff;height: 10px;"></div>
    </div>
    <div class="warp">
      <div style="font-size: 12px;">
        <span style="font-weight: bold;">职业评测包含以下纬度：</span>
        <div v-for="(item,index) in list" :key="index">
          <span style="font-weight: bold;">{{item.title + "："}}</span>
          <span>{{item.simpleOption}}</span>
        </div>
      </div>
      <div style="height:240px;width: 100%;" id="canvasRadar"></div>
      <div style="display: flex;flex-direction: column;font-size: 10px;">
        <span style="font-weight: bold;">注解：</span>
        <span>1.上图展现了测评对象在每个职业驱动力的维度上的百分站位。</span>
        <span>2.每个百分站位的范围是1%－99%，这反映了测评对象的结果在全体职业动机受测者结果中的位置。例如，39%表示在该维度上，测评对象的得分比数据库中39%的受测者的得分高。98%意味着测评对象该维度上的得分比98%的受测者都要高。百分站位越高，测评对象在该维度上的驱动因素强度越大。</span>
        <span>3.该百分站位结果基于将测评对象结果和数据库中的结果对比得出，该数据库目前包括308277名中国员工。</span>
      </div>
      <div class="block-item m6-explain" data-html2canvas-ignore="true" >
        <div class="block-title">
          <span>职业动机解析</span>
        </div>
        <div class="block-content">
          <div
            class="analysis-item"
            :style="{'background-color':colors[index]}"
            v-for="(item,index) in list"
            :key="index"
          >
            <span style="font-size: 14px;font-weight: bold;">{{item.title}}</span>
            <span
              v-html="item.dimensionAnalysis.replace(/\n/g,'<br/>').replace(new RegExp(item.dimension,'g'),item.title)"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { wikiGetAnalysisReport } from "@/api/oamanagement/workbench";
export default {
  data() {
    return {
      list: [],
      colors: [
        "#00FFFF",
        "#FFFF99",
        "#CCFFCC",
        "#CC99FF",
        "#FFCC99",
        "#99CCFF"
      ],
      showLoading: false
    };
  },
  props: {
    /** 用户手机号码 */
    userInfo: {
      type: Object,
      default: {}
    }
  },
  watch: {
    userInfo: {
      handler(o, n) {
        console.log(n);
        this.getAnalysisReport();
      },
      deep: true
    }
  },
  methods: {
    getAnalysisReport() {
      let self = this;
      if (self.userInfo && self.userInfo.phone) {
        this.showLoading = true;
        let params = {
          phone: self.userInfo.phone
        };
        wikiGetAnalysisReport(params)
          .then(res => {
            this.showLoading = false;
            self.list = res.data.analysisReport;
            self.$nextTick(function() {
              self.showRadar("canvasRadar");
            });
          })
          .catch(res => {
            this.showLoading = false;
          });
      }
    },

    showRadar(canvasId) {
      let self = this;
      let oData = {
        indicator: [],
        value: []
      };
      if(this.echarts){
        this.echarts.clear();
      }
      if(!self.list.length){
        return false;
      }
      for (let i = 0; i < self.list.length; i++) {
        oData.indicator.push({
          name: self.list[i].title,
          max: 100
        });
        oData.value.push(parseInt(self.list[i].normdistValue * 100));
      }
      let tempNameOne,
        tempValueOne = {};
      tempNameOne = oData.indicator[1];
      tempValueOne = oData.value[1];
      oData.indicator[1] = oData.indicator[self.list.length - 1];
      oData.value[1] = oData.value[self.list.length - 1];
      oData.indicator[self.list.length - 1] = tempNameOne;
      oData.value[self.list.length - 1] = tempValueOne;

      let tempNameTwo,
        tempValueTwo = {};
      tempNameTwo = oData.indicator[2];
      tempValueTwo = oData.value[2];
      oData.indicator[2] = oData.indicator[self.list.length - 2];
      oData.value[2] = oData.value[self.list.length - 2];
      oData.indicator[self.list.length - 2] = tempNameTwo;
      oData.value[self.list.length - 2] = tempValueTwo;

      let cWidth = document.documentElement.clientWidth;
      let center = ["50%", "50%"];
      let radius = 80;
      if (cWidth < 400) {
        center = ["54%", "50%"];
      }
      if (cWidth <= 360) {
        center = ["58%", "50%"];
      }
      if (cWidth <= 320) {
        radius = 65;
      }
      
      this.echarts = this.$echarts.init(document.getElementById("canvasRadar"));
      let option = {
        radar: {
          name: {
            textStyle: {
              color: "#000"
            }
          },
          indicator: oData.indicator,
          center: center, //调整雷达图的位置
          radius: radius //半径，可放大放小雷达图
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: oData.value,
                color: "#ffff",
                //这里的配置显示数值
                itemStyle: {
                  normal: {
                    color: "#59169c",
                    lineStyle: {
                      width: 0,
                      color: "rgba(255,74,74,.3)"
                    }
                  }
                },
                areaStyle: {
                  opacity: 0.9,
                  color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      color: "#B8D3E4",
                      offset: 0
                    },
                    {
                      color: "#72ACD1",
                      offset: 1
                    }
                  ])
                }
              }
            ]
          }
        ]
      };
      this.echarts.setOption(option);
    },
  }
};
</script>
<style scoped lang="scss">
.content {
  height: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    width: 100%;
    padding: 0 15px;
  }
  .block-item {
    box-sizing: border-box;
    font-size: 16px;
    padding-top: 5px;
  }

  .block-title {
    border-left: 3px solid #0089ff;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    background-color: #e5e5e5;
  }

  .block-content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 5px;
  }

  .result-item {
    width: 200px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 3px;
  }

  .analysis-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    font-size: 12px;
    padding: 3px 3px;
  }

  .analysis-item /deep/ em {
    font-weight: bold;
  }

  .warp {
    margin-top: 150px;
    box-sizing: border-box;
    padding-top: 5px;
    height: calc(100% - 170px);
    background-color: rgba(255, 255, 255, 0.8);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
